<template>
  <div>
    <el-row style="padding-top: 20px;padding-left: 20px;" class="header">
      <el-col :span="12">
        <el-form :model="form" label-width='50px' style="display: flex;">

          <el-form-item label="姓名" style="width: 40%;">
            <el-input v-model="form.keyword" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别" style="width: 40%;">
            <el-select v-model="form.sex">
              <el-option :value="1" label="男"></el-option>
              <el-option :value="2" label="女"></el-option>
              <el-option :value="0" label="全部"></el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </el-col>

      <el-col :span="6">
        <el-button type="primary" size="small" @click="renderVipList">搜索</el-button>
        <el-button size="small" style="margin-left: 20px;" @click="form = {};renderVipList()">重置</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border class="table" :height="getHeight()" style="margin: 20px; width: 95% ">
      <el-table-column type="index" label="序号" width="50" align="center" fixed>
      </el-table-column>

      <el-table-column prop="name" label="用户名" width="150" align="center">
      </el-table-column>
      
      <el-table-column prop="sex" label="性别" width="150" align="center">
        <template slot-scope="{row}">
          <div>
            {{ handleSex(row.sex) }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="操作" width="150" align="center">
        <template slot-scope="{row}">
          <el-switch :value="row.status==2?true:false" active-color="#13ce66" inactive-color="#ccc" @change="handleStatus($event,row.id,row.status)">    
        </el-switch>
        </template>
        

      </el-table-column>
      <el-table-column prop="sign" label="个性签名" align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="注册时间" width="200" align="center">
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentpage"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>
  </div>
</template>
  
<script>
import { getVipList, editVip } from '@/api/role';
export default {
  name: 'orderMember',
  data() {
    return {
      form: {
        name: '',
        sex: ''
      },
      tableData: [],
      currentpage: 1,
      limit: 20,
      count: 0,
     
    }
  },
  created() {
    this.renderVipList()
  },
  methods: {
    async renderVipList() {
      let res = await getVipList({ ...this.form, page: this.currentpage, limit: this.limit })
    //  console.log(res)
      if (res.code == 1) {
        this.tableData = res.data.list
        this.count = res.data.count
      }
    },
    handleSizeChange(val) {
      this.limit = val
      this.renderVipList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.currentpage = val
      this.renderVipList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 255
    },
    //处理性别
    handleSex(sex) {
      if (sex == 1) {
        return "男"
      } else if (sex == 2) {
        return "女"
      } else {
        return ''
      }
    },
    //处理状态
    handleStatus(e,id,status){
     // console.log(e,id,status)
     if(e){
      status=2
      editVip({id:id,status:status}).then(res=>{
        if(res.code==1){
          this.$message.success('冻结成功')
          this.renderVipList()
        }
      })
     }else{
      status=1
      editVip({id:id,status:status}).then(res=>{
        if(res.code==1){
          this.$message.success('解冻成功')
          this.renderVipList()
        }
      })
        
     }
    }
  },
 
}

</script>  
  
<style scoped>
.header {
  border-bottom: 1px solid #e1e1e1;
}
</style>
  